<template>
	<view style="height: 100vh;position: relative;" class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll>
			<view slot="top" class="theme_bg_color">
				<cu-custom id="nav" :isdw="true" :bgColor="'theme_bg_color'">
					<block slot="dw">
						<view class="flex align-end">
							<view class="dwt">商家列表</view>
							<view @click="sortShow=true" class="text-sm margin-left-sm"
								style="text-decoration:underline">{{option1[value1].text}}<text class="sm text-black cuIcon-order"></text></view>
						</view>
					</block>
				</cu-custom>
				<view id="head" class="" style="color: #fff;font-size: 26rpx;">
					<van-search @change="value=$event.detail" @search="search" shape="round" background="#ffffff"
						placeholder="输入商家名,快速找到哈" />
				</view>
			</view>
			<view class="grarg theme_bg_vice_color">
				<view class="cu-card">
					<view @click="$goPage('../../pageB/business/info?id='+item.id)" class="margin-lr radius12 shadow padding-sm margin-tb-sm theme_bg_color"
						style="position: relative;" v-for="(item,index) in dataList"
						:key="index">
						<view class="flex justify-start">
							<image :src="$isHttp(item.picture)" lazy-load
								style="width: 160rpx;height: 160rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class=" margin-left-sm" style="width: 520rpx;">
								<view class="flex justify-between margin-top-xs">
									<view class="text-bold text-lg text-black" style="max-height: 84rpx;overflow: hidden;">{{item.storeName}}</view>
									<view class="sm text-black">{{item.distance==''?'':item.distance+'km'}}</view>
								</view>
								<view class="margin-top-sm text-gray text-sm" style="max-height: 32rpx;overflow: hidden;">
									{{item.region}}{{item.address}}
								</view>
								<view class="margin-top-sm flex justify-between" style="color: #b2b1b6;">
									<view class="text-sm solid round">共上架<text
											class="text-green">{{item.playCount}}</text>个剧本</view>
									<!-- <view class="sm text-white">13.9km</view> -->
									<view class="sm text-black">
										<text class="text-sm text-gray">{{item.average==''?'':'人均消费:'}}</text>{{item.average==''?'':item.average+'元'}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty-view slot="empty">
				<view class="text-center text-gray" style="padding-top: 300rpx;">
					<image src="../../static/icon/kong.png" style="width: 320rpx;height: 240rpx;" mode=""></image>
					<view>没有更多了</view>
				</view>
			</empty-view>
		</z-paging>
		<van-popup :show="sortShow" @click-overlay="sortShow=false" @close="sortShow=false" round>
			<van-radio-group :value="value1" bind:change="onChange">
				<van-cell-group>
					<van-cell :title="item.text" clickable data-name="1" @click="selectSort(item.value)"
						v-for="(item,index) in option1" :key="index">
						<van-radio slot="right-icon" :name="item.value" icon-size="16" checked-color="#dcc512" />
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</van-popup>
		<drag-button  :isDock="true" :text="''" :existTabBar="true" @btnClick="$goPageIsLoginOk('/pageB/business/StoreEntry')">
			<block slot="content">
				<view class='text-center'>
					<image src="/static/icon/business.png" style="width:60rpx;height:60rpx"></image>
				</view>
				<view  class="text-xs cu-tag radius sm bg-grey">
					{{vuex_user.unionId==1?'我的店铺':'店铺入驻'}}
				</view>
			</block>
		</drag-button>
	</view>
</template>

<script>
	import { shareMixins} from '@/common/mixins/share.js'
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin,shareMixins],
		data() {
			return {
				latitude: '',
				longitude: '',
				value: '',
				dataList: [],

				color: '#292929',
				hasChoose: false,

				sortShow: false,
				option1: [{
						text: '距离排序',
						value: 0
					},
					{
						text: '价格排序',
						value: 1
					},
					// {
					// 	text: '评分排序',
					// 	value: 2
					// },
				],
				value1: 0,
			};
		},
		created() {
			// if (this.vuex_city == '定位中...' || this.vuex_city == undefined) {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => { //1.1 允许授权
						this.getLocation()
					},
					fail: () => { //1.2 拒绝授权
						uni.showModal({
							content: '检测到您没打开位置权限，为您更好的体验，请去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											console.log(res);
											this.getLocation();
										}
									})
								} else {
									console.log('取消');
									return false;
								}
							}
						})
						return false;
					}
				})
			// }
			//判断是否登录
			this.$u.api.getUserIsbussiness({
				userId: this.vuex_user.id ? this.vuex_user.id : ''
			}).then(res => {
				if (res.code == 401) {
					console.log(res)
					this.$login()
				}
			})
		},
		methods: {
			selectSort(v) {
				this.value1 = v
				this.sortShow = false
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				this.$u.api.getBusinessList({
					page: pageNo ? pageNo : 1,
					number: pageSize ? pageSize : 10,
					city: this.vuex_city,
					longitude: this.vuex_longitude,
					latitude: this.vuex_latitude,
					storeName: this.value,
					select: this.value1
				}).then(res => {
					this.$refs.paging.complete(res.data);
				})
			},
			search() {
				this.$refs.paging.reload();
				// this.$u.api.getBusinessList({
				// 	page: 1,
				// 	number: 10,
				// 	city: this.vuex_city,
				// 	storeName:this.value
				// }).then(res => {
				// 	this.$refs.paging.complete(res.data);
				// })
			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84', //'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						this.latitude = this.$addNum(res.latitude, 0.001276)
						this.longitude = this.$addNum(res.longitude, 0.006256)
						this.$u.vuex('vuex_latitude', this.latitude)
						this.$u.vuex('vuex_longitude', this.longitude)
						// uni.request({
						// 	header: {
						// 		"Content-Type": "application/text"
						// 	},
						// 	//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
						// 	url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
						// 		this.longitude + ',' + this.latitude +
						// 		'&key=7b7fbe6751d2491c692a1728a6c7afa4&radius=1000&extensions=all',
						// 	success: (re) => {
						// 		if (re.statusCode === 200) {
						// 			let citydata = re.data.regeocode.addressComponent.city
						// 			citydata = citydata.includes('市') ? citydata
						// 				.replace(/市/, ' ').split(' ')[0] : citydata
						// 			// console.log("获取中文街道地理位置成功", this.citydata)
						// 			this.$u.vuex('vuex_city', citydata)
						// 		}
						// 	},
						// 	fail: () => {
						// 		this.$textToast("定位失败，请打开手机定位")
						// 	}
						// });

					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.zd {
		position: absolute;
		top: 0;
		left: 0;
		width: 60rpx;
		height: 55rpx;
		z-index: 1;
	}

	// .grarg {
	// 	position: absolute;
	// 	top: 225rpx;
	// 	bottom: 100rpx;
	// }

	.box_whbrc {
		width: 90rpx;
		height: 60rpx;
		border-radius: 30rpx;
		// background-color: #cfa526;
		margin-right: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.bgc_cfa526 {
		background-color: #cfa526;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
	}
</style>
